<template>
  <view class="navi w-full bg-cover" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <view class="logo">
      <image src="@img/logo.png" class="logo-image" />
      <text class="logo-text">新鲜 · 亲民 · 快捷</text>
    </view>
    <view class="search">
      <text class="title">搜索商品</text>
      <text class="icon icon-scan"></text>
    </view>
  </view>
</template>
<script setup lang="ts">
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<style scoped lang="scss">
.navi {
  padding-top: 20rpx;
  padding-bottom: 1rpx;
  background-image: url('@/static/images/navigator_bg.png');
}
.logo {
  display: flex;
  align-items: center;
  height: 64rpx;
  padding-top: 20rpx;
  padding-left: 30rpx;

  .logo-image {
    width: 166rpx;
    height: 39rpx;
  }

  .logo-text {
    padding-left: 20rpx;
    margin: 2rpx 0 0 20rpx;
    font-size: 26rpx;
    color: #fff;
    border-left: solid #fff 1rpx;
  }
}
.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64rpx;
  padding: 10rpx 15rpx;
  margin: 16rpx 20rpx;
  font-size: 28rpx;
  color: #fff;
  background-color: #ffffff57;
  border-radius: 999rpx;

  .icon {
    padding: 15rpx;
    font-size: 35rpx;
  }
}
</style>
